<template>
  <!-- 会员分析 -->
  <div class="page-mem">
    <!-- 数据 -->
    <!-- 头部统计时间 -->
    <div class="header">
      <DataTime
        ref="dataTimeRef"
        @chang-date-type="onChangeDateType"
        @change-date-range="onChangeDateRange"
      />
    </div>

    <!-- 会员概览 -->
    <div class="analysis-item member-overview">
      <!-- 标题 -->
      <div class="analysis-item-title">
        {{ $t('dataAnalysis.memberPcrofile') }}
      </div>
      <div class="plat">
        <el-radio-group
          v-model="radio1"
          @change="onSelectMemberSurvey"
        >
          <el-radio-button
            :label="0"
            class="plat-item"
          >
            {{ $t('dataAnalysis.allMembers') }}
          </el-radio-button>
          <el-radio-button
            :label="1"
            class="plat-item"
          >
            {{ $t('dataAnalysis.freeMembers') }}
          </el-radio-button>
          <el-radio-button
            :label="2"
            class="plat-item"
          >
            {{ $t('dataAnalysis.payingMembers') }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- 轮播图 -->
      <MemAnalysisOverviewTwo
        :swiper-loading="swiperLoading"
        :data="overviewData"
        :compare-date="compareDate"
        @change-one-echart="onChangeOneEchart"
        @update-data="updateoneEchartIndex"
      />

      <!-- 会员概览数据 -->
      <div class="one-chart">
        <div class="charts-title">
          <div class="charts-title-item">
            <div class="line" />
            <span>{{ oneEchartCurrentName }}</span>
          </div>
        </div>
        <common-chart
          v-if="memberChart.show"
          :options="memberChart.options"
          style="width:100%;height:300px;"
        />
      </div>
    </div>

    <!-- 会员人数趋势 -->
    <div class="analysis-item">
      <!-- 标题 -->
      <div class="analysis-item-title">
        {{ $t('dataAnalysis.membershipTrends') }}
      </div>
      <!-- //第三部分选择按钮 -->
      <div class="plat">
        <el-radio-group v-model="radio3">
          <el-radio-button
            :label="1"
            class="plat-item"
          >
            {{ $t('dataAnalysis.freeMembers') }}
          </el-radio-button>
          <el-radio-button
            :label="2"
            class="plat-item"
          >
            {{ $t('dataAnalysis.payingMembers') }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- //第三部分数据图 -->
      <div class="three-chart">
        <div class="charts-title">
          <div class="charts-title-item">
            <div class="line" />
            <span>{{ $t('dataAnalysis.registerMember') }}</span>
          </div>
        </div>
        <common-chart
          v-if="memberTrendsChart.show"
          class="refund-chart"
          :options="memberTrendsChart.options"
          style="width:100%;height:300px;"
        />
      </div>
      <div class="data-tips-con">
        <img src="~@/assets/img/data-tips.png">
        <div class="tips-con">
          <p class="tips-title">
            {{ $t('dataAnalysis.dataAnalysisIdeas') }}
          </p>
          <p class="tips-content">
            {{ $t('dataAnalysis.dataAnalysisContent') }}
          </p>
        </div>
      </div>
    </div>
    <!-- 会员占比趋势 -->
    <div class="analysis-item">
      <!-- 标题 -->
      <div class="analysis-item-title">
        {{ $t('dataAnalysis.membershipRatioTrend') }}
      </div>
      <!-- //第四部分选择按钮 -->
      <div class="plat">
        <el-radio-group v-model="radio3">
          <el-radio-button
            :label="1"
            class="plat-item"
          >
            {{ $t('dataAnalysis.freeMembers') }}
          </el-radio-button>
          <el-radio-button
            :label="2"
            class="plat-item"
          >
            {{ $t('dataAnalysis.payingMembers') }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- //第四部分数据图 -->
      <div class="four-chart">
        <div class="charts-title">
          <div class="charts-title-item">
            <div class="line" />
            <span>{{ $t('dataAnalysis.registerMember') }}</span>
          </div>
        </div>
        <common-chart
          v-if="registerMemberChart.show"
          :options="registerMemberChart.options"
          style="width:100%;height:300px;"
        />
        <!--        <div-->
        <!--          id="four-echart"-->
        <!--          style="width:100%;height:300px;"-->
        <!--        />-->
      </div>
    </div>
    <!-- 会员贡献价值分析 -->
    <div class="analysis-item member-contributions">
      <!-- 标题 -->
      <div class="analysis-item-title">
        {{ $t('dataAnalysis.valueAnalysisOfMemberContributions') }}
      </div>
      <!-- //第五部分多选标签栏 -->
      <div class="contributions-form">
        <el-form
          :model="form"
          @submit.prevent
        >
          <el-form-item :label="`${$t('dataAnalysis.basicIndicators')}:`">
            <el-checkbox-group v-model="form.saleIndex">
              <el-checkbox
                :label="$t('dataAnalysis.totalMembership')"
                name="saleIndex"
                checked
              />
              <el-checkbox
                :label="$t('dataAnalysis.totalMembershipRatio')"
                name="saleIndex"
                checked
              />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item :label="`${$t('dataAnalysis.clinchADealtheIndicators')}:`">
            <el-checkbox-group v-model="form.serviceIndex">
              <el-checkbox
                :label="`${$t('dataAnalysis.numberOfTradedMembers')}`"
                name="saleIndex"
                checked
              />
              <el-checkbox
                :label="`${$t('dataAnalysis.tradedMembersRatio')}`"
                name="saleIndex"
                checked
              />
              <el-checkbox
                :label="`${$t('dataAnalysis.payOrderQuantity')}`"
                name="saleIndex"
                checked
              />
              <el-checkbox
                :label="`${$t('dataAnalysis.customerUnitPrice')}`"
                name="saleIndex"
              />
              <el-checkbox
                :label="`${$t('dataAnalysis.paymentAmount')}`"
                name="saleIndex"
              />
              <el-checkbox
                :label="`${$t('dataAnalysis.proportionOfPaymentAmount')}`"
                name="saleIndex"
              />
              <el-checkbox
                :label="`${$t('dataAnalysis.perCapitaConsumptionFrequency')}`"
                name="saleIndex"
              />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            :label="`${$t('dataAnalysis.clinchADealtheIndicators')}:`"
            class="hide-label"
          >
            <span id="maxSelectSpan">{{ $t('dataAnalysis.upTo8') }}</span>
            <span class="form-inline-select">{{ $t('dataAnalysis.selected') }} {{ selectNum }}/{{ $t('dataAnalysis.eightItems') }}</span>
          </el-form-item>
        </el-form>
      </div>
      <!-- //第五部分数据表 -->
      <!-- 如何实现响应展示 -->
      <div class="table-con border-table-con">
        <el-table
          :data="tableData5"
          style="width: 100%"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
        >
          <el-table-column
            highlight-current-row="true"
            fixed
            prop="custType"
            :label="$t('dataAnalysis.customerType')"
            width="160"
          />
          <el-table-column
            v-if="isVisible1"
            prop="totalMember"
            :label="$t('dataAnalysis.totalMembership')"
          />
          <el-table-column
            v-if="isVisible2"
            prop="totalMemberRate"
            :label="$t('dataAnalysis.totalMembershipRatio')"
          />
          <el-table-column
            v-if="isVisible3"
            prop="payMemberNum"
            :label="$t('dataAnalysis.numberOfTradedMembers')"
          />
          <el-table-column
            v-if="isVisible4"
            prop="payMemberNumRate"
            :label="$t('dataAnalysis.tradedMembersRatio')"
          />
          <el-table-column
            v-if="isVisible5"
            prop="payOrderNum"
            :label="$t('dataAnalysis.payOrderQuantity')"
          />
          <el-table-column
            v-if="isVisible6"
            prop="pricePerMember"
            :label="$t('dataAnalysis.customerUnitPrice')"
          />
          <el-table-column
            v-if="isVisible7"
            prop="payAmount"
            :label="$t('dataAnalysis.paymentAmount')"
          />
          <el-table-column
            v-if="isVisible8"
            prop="payAmountRate"
            :label="$t('dataAnalysis.proportionOfPaymentAmount')"
          />
          <el-table-column
            v-if="isVisible9"
            prop="frequencyOfConsume"
            :label="$t('dataAnalysis.perCapitaConsumptionFrequency')"
            width="120"
          />
        </el-table>
      </div>
      <div class="data-tips-con five-text">
        <img
          src="~@/assets/img/data-tips.png"
          alt=""
        >
        <div class="tips-con">
          <p class="tips-title">
            {{ $t('dataAnalysis.dataAnalysisIdeas') }}
          </p>
          <p class="tips-content">
            {{ $t('dataAnalysis.memberLevelDateText1') }}
            <a>
              <router-link to="/marketing-coupon/coupon">{{ $t('dataAnalysis.coupon') }}</router-link>
            </a>
            {{ $t('dataAnalysis.orConfig') }}
            <a>
              <router-link to="/user-score-growth-config">{{ $t('dataAnalysis.memberTransactionsTask') }}</router-link>
            </a> {{ $t('dataAnalysis.memberLevelDateText2') }}
          </p>
        </div>
      </div>
    </div>
    <!-- 新老会员成交分析 -->
    <div class="analysis-item">
      <!-- 标题 -->
      <div class="analysis-item-title">
        {{ $t('dataAnalysis.transactionAnalysisOfNewAndOldMembers') }}
      </div>
      <!-- //第六部分选择标签栏 -->
      <!-- 一个默认选择按钮+一个多选按钮 -->
      <div class="six-checkbox">
        <span style="margin-right: 20px">{{ $t('dataAnalysis.dataIndicators') }}</span>
        <el-checkbox
          v-model="checked1"
          disabled
        >
          {{ $t('dataAnalysis.numerialNumber') }}
        </el-checkbox>
      </div>
      <!-- //第六部分数据表 -->
      <div class="border-table-con">
        <el-table
          :data="tableData6"
          style="width: 100%;"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
        >
          <el-table-column
            prop="type"
            :label="$t('dataAnalysis.memberType')"
            width="180"
          />
          <el-table-column
            prop="payMemberNum"
            :label="$t('dataAnalysis.numberOfTradedMembers')"
            width="180"
          />
          <el-table-column
            prop="payMemberNumRate"
            :label="$t('dataAnalysis.tradedMembersRatio')"
          />
          <el-table-column
            prop="payOrderNum"
            :label="$t('dataAnalysis.payOrderQuantity')"
          />
          <el-table-column
            prop="pricePerMember"
            :label="$t('dataAnalysis.customerUnitPrice')"
          />
          <el-table-column
            prop="payAmount"
            :label="$t('dataAnalysis.paymentAmount')"
          />
          <el-table-column
            prop="payAmountRate"
            :label="$t('dataAnalysis.proportionOfPaymentAmount')"
          />
        </el-table>
      </div>
      <!-- 第六部分单选按钮 -->
      <div class="six-radio">
        <span>{{ $t('dataAnalysis.trendIndicators') }}</span>
        <el-radio-group
          v-model="radio6B"
          style="margin-left: 15px;"
        >
          <el-radio
            :label="0"
            class="plat-item"
          >
            {{ $t('dataAnalysis.numberOfTradedMembers') }}
          </el-radio>
          <el-radio
            :label="1"
            class="plat-item"
          >
            {{ $t('dataAnalysis.payOrderQuantity') }}
          </el-radio>
          <el-radio
            :label="2"
            class="plat-item"
          >
            {{ $t('dataAnalysis.customerUnitPrice') }}
          </el-radio>
          <el-radio
            :label="3"
            class="plat-item"
          >
            {{ $t('dataAnalysis.paymentAmount') }}
          </el-radio>
        </el-radio-group>
      </div>
      <!-- 第六部分相应上面单选按钮的Echart数据图 -->
      <div class="six-echart">
        <!-- 第六部分柱形数据图引入 -->
        <div class="charts-title">
          <div class="charts-title-item">
            <div class="line" />
            <span>{{ radio6BNewTitil }}</span>
          </div>
          <div class="charts-title-item">
            <div
              class="line"
              style="background: #7fdec1"
            />
            <span>{{ radio6BOldTitil }}</span>
          </div>
        </div>
        <common-chart
          v-if="trendChart.show"
          class="refund-chart"
          :options="trendChart.options"
          style="width: 100%; height: 300px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import DataTime from './components/dataTime.vue'
import MemAnalysisOverviewTwo from './components/mem-overview-two.vue'
const checked1 = ref(true)
const radio6BNewTitilArray = [$t('dataAnalysis.newTM'), $t('dataAnalysis.newTMNumbers'), $t('dataAnalysis.newTMPP'), $t('dataAnalysis.newTMPaidAmount')]// 第六部分 Echart新成交会员的标题名列表
const radio6BOldTitilArray = [$t('dataAnalysis.oldTM'), $t('dataAnalysis.oldTMNumbers'), $t('dataAnalysis.oldTMPP'), $t('dataAnalysis.newTMPaidAmount')] // 第六部分 Echart老成交会员的标题名列表

let dateType = 1
const dateRange = ref(null)
const onChangeDateType = (val) => {
  dateType = val
}

const onChangeDateRange = (val) => {
  dateRange.value = val
}
watch(dateRange, () => {
  compareCurrDate(dateType)
  onSelectMemberSurvey()
  onUpdateThreeAndFourEchart()
  onGetFiveData()
  onGetSixData()
})
// 监听第六部分的单选框
const radio6B = ref(0)
watch(radio6B, (val) => {
  switchSixEchart(val)
})
// 第三部分切换会员监听
const radio3 = ref('1')

watch(radio3, () => {
  onUpdateThreeAndFourEchart()
})
// 第五部分的最多项多选款监听
const sumData = ref([]) // 所有指标
const selectNum = ref(0) // 选择指标的数量
const form = reactive({
  saleIndex: [], // 基础指标
  serviceIndex: [] // 成交指标
})
watch(() => form.saleIndex, () => {
  selectNum.value = form.saleIndex.length + form.serviceIndex.length
  // sumData是用来存放点击选中的文本框信息
  sumData.value = []
  sumData.value = sumData.value.concat(form.saleIndex).concat(form.serviceIndex)
  const checks = document.getElementsByName('saleIndex')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= 8) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < 8) {
    textShare(span, 'grey')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  }
})
watch(() => form.serviceIndex, () => {
  nextTick(() => {
    selectNum.value = form.saleIndex.length + form.serviceIndex.length
    sumData.value = []
    sumData.value = sumData.value.concat(form.saleIndex).concat(form.serviceIndex)
    const checks = document.getElementsByName('saleIndex')
    const span = document.getElementById('maxSelectSpan')
    checks.forEach(i => {
      if (selectNum.value >= 8) {
        textShare(span, 'red')
        if (!i.checked) {
          i.setAttribute('disabled', 'true')
        }
      }
    })
    if (selectNum.value < 8) {
      textShare(span, 'grey')
      checks.forEach(i => {
        i.removeAttribute('disabled')
      })
    }
  })
}, { immediate: true })
// 将存放的选择框数据调用函数来执行数据响应展示操作
watch(sumData, () => {
  onChangVisibles()
})
const compareDate = ref($t('dataAnalysis.compareWithYesterday'))

const compareCurrDate = (type) => {
  switch (type) {
    case 1:
      compareDate.value = $t('dataAnalysis.compareWithYesterday')
      break
    case 2:
      compareDate.value = $t('dataAnalysis.compareWithThePrevious7Days')
      break
    case 3:
      compareDate.value = $t('dataAnalysis.compareWithThePrevious30Days')
      break
    case 4:
      compareDate.value = $t('dataAnalysis.compareWithThePreviousOneDay')
      break
    case 5:
      compareDate.value = $t('dataAnalysis.compareWithThePreviousAMonth')
      break
    default:
      compareDate.value = '-'
      break
  }
}
const judgeStrArrIncludeOtherString = (str) => {
  return sumData.value.includes(str)
}
/**
 * 控制表格列显隐
 */
const isVisible1 = ref(true)
const isVisible2 = ref(true)
const isVisible3 = ref(true)
const isVisible4 = ref(true)
const isVisible5 = ref(true)
const isVisible6 = ref(false)
const isVisible7 = ref(false)
const isVisible8 = ref(false)
const isVisible9 = ref(false)
const onChangVisibles = () => {
  isVisible1.value = judgeStrArrIncludeOtherString($t('dataAnalysis.totalMembership'))
  isVisible2.value = judgeStrArrIncludeOtherString($t('dataAnalysis.totalMembershipRatio'))
  isVisible3.value = judgeStrArrIncludeOtherString($t('dataAnalysis.numberOfTradedMembers'))
  isVisible4.value = judgeStrArrIncludeOtherString($t('dataAnalysis.tradedMembersRatio'))
  isVisible5.value = judgeStrArrIncludeOtherString($t('dataAnalysis.payOrderQuantity'))
  isVisible6.value = judgeStrArrIncludeOtherString($t('dataAnalysis.customerUnitPrice'))
  isVisible7.value = judgeStrArrIncludeOtherString($t('dataAnalysis.paymentAmount'))
  isVisible8.value = judgeStrArrIncludeOtherString($t('dataAnalysis.proportionOfPaymentAmount'))
  isVisible9.value = judgeStrArrIncludeOtherString($t('dataAnalysis.perCapitaConsumptionFrequency'))
}
// 初始化时先获取时间
const dataTimeRef = ref(null)
const init = () => {
  dateType = dataTimeRef.value.dateValue
  dateRange.value = dataTimeRef.value.dateRange1
  onChangVisibles()
}
onMounted(() => {
  init()
})
const overviewData = ref({
  title: [$t('dataAnalysis.cumulativeNumberOfMembers'), $t('dataAnalysis.numberOfNewMembers'), $t('dataAnalysis.numberOfPaidMembers'), $t('dataAnalysis.numberOfCouponMembers'), $t('dataAnalysis.memberPaidAmount'), $t('dataAnalysis.numberOfMemberPaidOrders'), $t('dataAnalysis.memberCustomerUnitPrice')],
  num: [],
  rate: []
})
// 第一部分会员概览切换
const radio1 = ref('0')
const swiperLoading = ref(false)
const onSelectMemberSurvey = () => {
  swiperLoading.value = true
  http({
    url: http.adornUrl('/admin/customerAnalysis/getMemberSurvey'),
    method: 'get',
    params: http.adornParams(
      {
        memberType: radio1.value,
        dateType,
        startTime: dateRange.value[0],
        endTime: dateRange.value[1]
      }
    )
  }).then(({ data }) => {
    if (data) {
      swiperLoading.value = false
      onUpdateOneEchart(data.memberOverviewModelList, oneEchartIndex)
      overviewData.value.rate = [data.memberOverviewModel.totalMemberRate, data.memberOverviewModel.newMemberRate, data.memberOverviewModel.payMemberRate, data.memberOverviewModel.couponMemberRate, data.memberOverviewModel.memberPayAmountRate, data.memberOverviewModel.memberPayOrderRate, data.memberOverviewModel.memberSingleAmountRate]
      overviewData.value.num = [data.memberOverviewModel.totalMember, data.memberOverviewModel.newMember, data.memberOverviewModel.payMember, data.memberOverviewModel.couponMember, data.memberOverviewModel.memberPayAmount, data.memberOverviewModel.memberPayOrder, data.memberOverviewModel.memberSingleAmount]
    }
  })
}
// 获取第一部分Echart数据图
const oneEchartCurrentName = ref('') // 会员概览数据图下的所选中的名称
let dataArray = []
let timeArray = []

const memberChart = reactive({
  options: {},
  show: false
})
const onGetOneEchart = () => {
  memberChart.options = {
    color: ['#155bd4'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: timeArray,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '', // 会员数（人）
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#E0E6F1'],
            width: 1,
            type: 'solid'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: oneEchartCurrentName.value,
        type: 'line',
        data: dataArray,
        smooth: true,
        itemStyle: {
          normal: {
            lineStyle: {
              color: '#155bd4'
            }
          }
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(0, 88, 255, 0.2)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        }
      }
    ]
  }
  memberChart.show = true
}
const dataForm = reactive({})
let oneEchartIndex = 0
const updateoneEchartIndex = (index) => {
  oneEchartIndex = index
  onUpdateOneEchart(dataForm.value, index)
}
// 更新第一部分Echart数据图的数据
const onUpdateOneEchart = (data, echartType) => {
  dataForm.value = data
  timeArray = []
  dataArray = []
  // 通过判断传入的类型来填充不同数据
  switch (echartType) {
    case 0:
      for (let j = 0, len = dataForm.value.length; j < len; j++) {
        timeArray.push(dataForm.value[j].currentDay)
        dataArray.push(dataForm.value[j].totalMember)
      }
      break
    case 1:
      for (let j2 = 0, len2 = dataForm.value.length; j2 < len2; j2++) {
        timeArray.push(dataForm.value[j2].currentDay)
        dataArray.push(dataForm.value[j2].newMember)
      }
      break
    case 2:
      for (let j3 = 0, len3 = dataForm.value.length; j3 < len3; j3++) {
        timeArray.push(dataForm.value[j3].currentDay)
        dataArray.push(dataForm.value[j3].payMember)
      }
      break
    case 3:
      for (let j4 = 0, len4 = dataForm.value.length; j4 < len4; j4++) {
        timeArray.push(dataForm.value[j4].currentDay)
        dataArray.push(dataForm.value[j4].couponMember)
      }
      break
    case 4:
      for (let j5 = 0, len5 = dataForm.value.length; j5 < len5; j5++) {
        timeArray.push(dataForm.value[j5].currentDay)
        dataArray.push(dataForm.value[j5].memberPayAmount)
      }
      break
    case 5:
      for (let j6 = 0, len6 = dataForm.value.length; j6 < len6; j6++) {
        timeArray.push(dataForm.value[j6].currentDay)
        dataArray.push(dataForm.value[j6].memberPayOrder)
      }
      break
    case 6:
      for (let j7 = 0, len7 = dataForm.value.length; j7 < len7; j7++) {
        timeArray.push(dataForm.value[j7].currentDay)
        dataArray.push(dataForm.value[j7].memberSingleAmount)
      }
      break

    default:
      for (let j0 = 0, len0 = dataForm.value.length; j0 < len0; j0++) {
        timeArray.push(dataForm.value[j0].currentDay)
        dataArray.push(dataForm.value[j0].totalMember)
      }
      break
  }
  for (let i = 0; i < timeArray.length; i++) {
    timeArray[i] = onSetFormatDate(timeArray[i])
  }
  onGetOneEchart()
}

// 获取第三部分Echart数据图
let radio3DataArray = [] // 第三部分会员人数趋势人数数据
let radio3TimeArray = [] // 第三部分会员人数趋势时间数据
const memberTrendsChart = reactive({
  options: {},
  show: false
})
const onGetThreeEchart = () => {
  memberTrendsChart.options = {
    color: ['#155bd4'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: []
    },
    xAxis: [
      {
        type: 'category',
        data: radio3TimeArray,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: $t('dataAnalysis.memberNum')
      }
    ],
    series: [
      {
        name: $t('dataAnalysis.registerMember'),
        type: 'bar',
        smooth: true,
        itemStyle: {
          normal: {
            color: '#155bd4',
            barBorderRadius: [15, 15, 0, 0]
          },
          emphasis: {
            color: '#155bd4'
          }
        },
        barWidth: 20,
        data: radio3DataArray
      }
    ]
  }
  memberTrendsChart.show = true
}
// 获取第四部分Echart数据图
let radio3RateDataArray = [] // 第三部分会员占比趋势人数数据
const registerMemberChart = reactive({
  options: {},
  show: false
})
const onGetFourEchart = () => {
  registerMemberChart.options = {
    color: ['#155bd4'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: (params) => {
        return `<div class="tooltip-con">
                      <div>${params[0].axisValue}</div>
                      <span class="dot"></span>
                      <span class="name">${params[0].seriesName}<span>
                      <span class="value">${params[0].data}%</span>
                      <div style="clear:both"></div>
                    </div>`
      }
    },
    legend: {
      data: []
    },
    xAxis: [
      {
        type: 'category',
        data: radio3TimeArray,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          formatter: '{value}%'
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#E0E6F1'],
            width: 1,
            type: 'solid'
          }
        },
        name: $t('dataAnalysis.memberNumPercentage')
      }
    ],
    series: [
      {
        name: $t('dataAnalysis.registerMember'),
        type: 'bar',
        itemStyle: {
          normal: {
            color: '#155bd4',
            barBorderRadius: [15, 15, 0, 0]
          },
          emphasis: {
            color: '#155bd4'
          }
        },
        barWidth: 20,
        data: radio3RateDataArray
      }
    ]
  }
  registerMemberChart.show = true
}
// 更新第三、第四部分Echart数据图
const onUpdateThreeAndFourEchart = () => {
  http({
    url: http.adornUrl('/admin/customerAnalysis/getMemberTrend'),
    method: 'get',
    params: http.adornParams({
      memberType: radio3.value,
      dateType,
      startTime: dateRange.value[0],
      endTime: dateRange.value[1]
    })
  }).then(({ data }) => {
    if (data) {
      radio3DataArray = []
      radio3RateDataArray = []
      radio3TimeArray = []
      for (let i = 0; i < data.length; i++) {
        data[i].currentDay = onSetFormatDate(data[i].currentDay)
        radio3TimeArray.push(data[i].currentDay)
        radio3DataArray.push(data[i].memberNum)
        radio3RateDataArray.push((data[i].memberNumRate * 100).toFixed(2))
      }
      onGetThreeEchart()
      onGetFourEchart()
    }
  })
}

// 获取第五部分的表格数据
const tableData5 = ref([
  {
    custType: $t('dataAnalysis.allFreeGradeMembers')
  },
  {
    custType: $t('dataAnalysis.allPaidMembers')
  }])
const onGetFiveData = () => {
  http({
    url: http.adornUrl('/admin/customerAnalysis/getMemberContributeValue'),
    method: 'get',
    params: http.adornParams({
      dateType,
      startTime: dateRange.value[0],
      endTime: dateRange.value[1]
    })
  }).then(({ data }) => {
    if (data) {
      data.publicMember.custType = tableData5.value[0].custType
      data.paidMember.custType = tableData5.value[1].custType
      tableData5.value = []
      tableData5.value.push(data.publicMember)
      tableData5.value.push(data.paidMember)
      tableData5.value.forEach(i => {
        i.payMemberNumRate = (i.payMemberNumRate * 100).toFixed(2) + '%'
        i.totalMemberRate = (i.totalMemberRate * 100).toFixed(2) + '%'
      })
    }
  })
}
// 获取第六部分的数据图
const radio6BOldTitil = ref(0) // 第六部分 Echart老成交会员的标题名
const radio6BNewTitil = ref(0) // 第六部分 Echart新成交会员的标题名
let trendOldArray = [] // 第六部分 新老会员成交分析 老成交会员数据
let trendNewArray = [] // 第六部分 新老会员成交分析 新成交会员数据
let trendDateArray = [] // 第六部分 新老会员成交分析 时间数据
const trendChart = reactive({
  options: {},
  show: false
})
const onGetSixEchart = () => {
  trendChart.options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: []
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: trendDateArray,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ''
      }
    ],
    series: [
      {
        name: radio6BNewTitil.value,
        type: 'bar',
        smooth: true,
        itemStyle: {
          normal: {
            color: '#155bd4',
            barBorderRadius: [15, 15, 0, 0]
          },
          emphasis: {
            color: '#155bd4'
          }
        },
        barWidth: 20,
        data: trendNewArray
      },
      {
        name: radio6BOldTitil.value,
        type: 'bar',
        smooth: true,
        itemStyle: {
          normal: {
            color: '#7fdec1',
            barBorderRadius: [15, 15, 0, 0]
          },
          emphasis: {
            color: '#7fdec1'
          }
        },
        barWidth: 20,
        data: trendOldArray
      }
    ]
  }
  trendChart.show = true
}
// 获取第六部分的数据
let tempSixData = []
const tableData6 = ref([{
  type: $t('dataAnalysis.allTradedMember'),
  payMemberNum: '0',
  payAmountRate: '100.00%',
  payAmount: '0.00',
  pricePerMember: '-',
  payMemberNumRate: '100.00%',
  payOrderNum: '0'
}, {
  type: $t('dataAnalysis.newTM'),
  payMemberNum: '0',
  payAmountRate: '100.00%',
  payAmount: '0.00',
  pricePerMember: '-',
  payMemberNumRate: '100.00%',
  payOrderNum: '0'
}, {
  type: $t('dataAnalysis.oldTM'),
  payMemberNum: '0',
  payAmountRate: '100.00%',
  payAmount: '0.00',
  pricePerMember: '-',
  payMemberNumRate: '100.00%',
  payOrderNum: '0'
}])

const onGetSixData = () => {
  http({
    url: http.adornUrl('/admin/customerAnalysis/getMemberDeal'),
    method: 'get',
    params: http.adornParams({
      dateType,
      startTime: dateRange.value[0],
      endTime: dateRange.value[1]
    })
  }).then(({ data }) => {
    if (data) {
      // 第六部分表格数据填充
      data.allMember.type = tableData6.value[0].type
      data.newMember.type = tableData6.value[1].type
      data.oldMember.type = tableData6.value[2].type
      tableData6.value = []
      tableData6.value.push(data.allMember)
      tableData6.value.push(data.newMember)
      tableData6.value.push(data.oldMember)

      tableData6.value.forEach(i => {
        i.payMemberNumRate = (i.payMemberNumRate * 100).toFixed(2) + '%'
        i.payAmountRate = (i.payAmountRate * 100).toFixed(2) + '%'
      })

      for (let i = 0; i < data.trendParam.length; i++) {
        data.trendParam[i].currentDay = onSetFormatDate(data.trendParam[i].currentDay)
      }
      tempSixData = data.trendParam
      switchSixEchart(radio6B.value)
    }
  })
}
// 第六部分Echart图切换选项
const switchSixEchart = (trendType) => {
  const myData = tempSixData
  trendDateArray = []
  trendNewArray = []
  trendOldArray = []
  radio6BNewTitil.value = radio6BNewTitilArray[trendType]
  radio6BOldTitil.value = radio6BOldTitilArray[trendType]
  switch (trendType) {
    case 0:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray[i] = myData[i].currentDay
        trendNewArray[i] = myData[i].newPayMemberNum
        trendOldArray[i] = myData[i].oldPayMemberNum
      }
      break
    case 1:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray[i] = myData[i].currentDay
        trendNewArray[i] = myData[i].newPayOrderNum
        trendOldArray[i] = myData[i].oldPayOrderNum
      }
      break
    case 2:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray[i] = myData[i].currentDay
        trendNewArray[i] = myData[i].newPricePerMember
        trendOldArray[i] = myData[i].oldPricePerMember
      }
      break
    case 3:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray[i] = myData[i].currentDay
        trendNewArray[i] = myData[i].newPayAmount
        trendOldArray[i] = myData[i].oldPayAmount
      }
      break

    default:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray[i] = myData[i].currentDay
        trendNewArray[i] = myData[i].newPayMemberNum
        trendOldArray[i] = myData[i].oldPayMemberNum
      }
      break
  }

  onGetSixEchart()
}
/**
     * 格式化时间
     */
const onSetFormatDate = (date) => {
  const tempDate = date + ''
  return tempDate.substring(0, 4) + '-' + tempDate.substring(4, 6) + '-' + tempDate.substring(6, 8)
}
/**
     * 文字效果
     */
const textShare = (div, color) => {
  div.style.color = color
}
const onChangeOneEchart = (val) => {
  oneEchartCurrentName.value = val
}

</script>
<!-- eslint-disable vue-scoped-css/no-unused-selector -->
<style lang="scss" scoped>
.page-mem {
  // 公共样式
  .analysis-item {
    margin: 80px 0 20px 0;
    .analysis-item-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      position: relative;
      &::before {
        content: '';
        display: block;
        height: 20px;
        width: calc(100% + 40px);
        position: absolute;
        background: #f5f6f9;
        top: -50px;
        left: -20px;
        z-index: 9;
      }
    }

    .plat {
      :deep(.plat-item.el-radio-button .el-radio-button__inner) {
          border-radius: 0;
          background: #FFF;
      }
      :deep(.el-radio-button__orig-radio:checked)  + :deep(.el-radio-button__inner) {
        color: #155bd4;
      }
      :deep(.plat-item.is-active .el-radio-button__inner) {
          color: #155bd4;
          background-color: rgba(21,91,212, .1);
      }
      :deep(.el-radio-group:first-child .el-radio-button:first-child .el-radio-button__inner) {
        color: #155bd4;
      }
    }
  }

  .table-con {
    margin: 20px 0;
  }

  .border-table-con {
    border: 1px solid #eee;
    border-bottom: none;
  }

  .charts-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .charts-title-item {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      .line {
        width: 18px;
        height: 8px;
        opacity: 1;
        border-radius: 8px;
        margin-right: 10px;
        background: #155bd4;
      }
      span {
        margin-right: 20px;
      }
    }
  }

  .data-tips-con {
    display: flex;
    align-items: center;
    background: #f7f8fa;
    padding: 24px 20px;
    img {
      height: 52px;
      width: 52px;
      margin-right: 20px;
    }
    .tips-con {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 52px;
      .tips-title {
        margin-bottom: 0;
        line-height: 0;
        font-size: 16px;
      }
      .tips-content {
        line-height: 14px;
        font-size: 14px;
        color: #666;
      }
    }
  }

  // 会员概览
  .member-overview {
    margin-top: 30px;
    .analysis-item-title::before {
      display: none;
    }
  }

  // 会员贡献价值分析
  .member-contributions {
    .contributions-form {
      background-color: #f7f8fa;
      padding: 30px 20px;
     :deep(.el-form-item)  {
        margin-bottom: 0;
      }
      .hide-label {
       :deep(.el-form-item__label)  {
          color: transparent;
        }
      }
    }
  }

  .header {
    padding: 15px 20px;
    margin-bottom: 20px;
    background: #f7f8fa;
  }

  //第三部分
  .three-chart {
    width: 100%;
    height: 360px;
    margin: auto;
    padding: 20px 4px 4px 4px;
  }
  //第四部分
  .four-chart {
    width: 100%;
    height: 360px;
    margin: auto;
    padding: 20px 4px 4px 4px;
  }

  .six-checkbox {
    margin-bottom: 20px;
  }
  .six-radio {
    margin: 20px 0;
  }

  // 自定义图表的图示框样式
  .tooltip-con {
    .dot {
      display: inline-block;
      margin-right: 4px;
      border-radius: 10px;
      width: 10px;
      height: 10px;
      background-color: #155bd4;
    }
    .name {
      font-size: 14px;
      color: #666;
      font-weight: 400;
      margin-left: 2px;
    }
    .value {
      float: right;
      margin-left: 20px;
      font-size: 14px;
      color: #666;
      font-weight: 900;
    }
  }
}
</style>
